<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>component</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./vue.js"></script>
</head>
<style>

</style>

<body>
    <!-- <div id="app">
        <ol>
            <todo-item></todo-item>
            <li>dsfaf</li>
        </ol>
    </div> -->
    <div id="app">
        <ol>
            <todo-item></todo-item>
            <todo-item></todo-item>
            <li>
                <button-counter></button-counter>
                <button-counter></button-counter>
                <button-counter></button-counter>
            </li>
            <li>
                <todo-item></todo-item>
            </li>

        </ol>
    </div>
    <script>
        Vue.component('todo-item', {
            // template:'<li>todo a</li>'
            template: '<li><button @click="reset">哈哈</button></li>'
        })
        // 定义一个名为 button-counter 的新组件
        Vue.component('button-counter', {
            // 一个组件的 data 选项必须是一个函数,如果 Vue 没有这条规则，点击一个按钮就可能会影响到其它所有实例：
            data: function () {
                return {
                    count: 0
                }
            },
            template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
        })
        var app = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                reset: function () {
                    this.count = 0;
                }
            }
        })

    </script>
</body>

</html>